<template>
  <div>
    <el-container>
      <!--<el-header class="common-home">-->
        <!--<div><span></span>系统信息</div>-->
        <!--<div class="refresh"><el-button icon="el-icon-refresh" @click.native="currentRefresh">刷新</el-button></div>-->
      <!--</el-header>-->
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            系统信息
          </el-header>
          <el-main class="info-main">
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">服务器操作系统:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="serverOperatingSystem"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">Web服务器:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="webServer"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">PHP 版本:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="pHPVersion"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">MySQL 版本:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="mySQLVersion"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">安全模式:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="safeMode"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">安全模式GID:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="safeModeGID"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">Socket 支持:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="socketSupport"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">时区设置:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="timeZoneIsSet"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">GD 版本:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="gDVersion"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">Zlib 支持:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="zlibSupport"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">IP 库版本:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="iPVersioin"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">文件上传的最大大小:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="fileUploadMaxSize"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">程序版本:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="programVersioin"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color">安装日期:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="installDate"></div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="4"><div class="grid-content bg-purple bg-color">编码:</div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple" v-text="coding"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple bg-color"></div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
          </el-main>
        </el-container>

      </el-main>
    </el-container>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                serverOperatingSystem:"Linux (114.55.34.251)",
                webServer:"nginx/1.10.2",
                pHPVersion:"5.6.30",
                mySQLVersion:"5.5.56",
                safeMode:"否",
                safeModeGID:"否",
                socketSupport:"是",
                timeZoneIsSet:"Asia/Shanghai",
                gDVersion:"GD2 ( JPEG GIF PNG)",
                zlibSupport:"是",
                iPVersioin:"20071024",
                fileUploadMaxSize:"40M",
                programVersioin:"v2.2.2 RELEASE 20180629",
                installDate:"2018-05-02",
                coding:"UTF-8"
            }
        },
        methods:{
            currentRefresh(){
                this.$router.go(0);
            }
        }
    }
</script>

<style>
  .main{
    padding:0 !important;
    background-color:#F9F9F9;
    margin-top:10px !important;
  }
</style>
<style scoped>
  .common-home{
    background-color:#F3F3F3;
  }
  .common-home,.content-header{
    border-bottom:1px solid #E4E4E4;
    position: relative;
  }
  .common-home>div{
    display: inline-block;
    width:100px;
    height:50px;
    vertical-align: top;
    text-align: center;
    line-height: 50px;
    color:#666666;
  }
  .common-home>.refresh{
    position: absolute;
    right:10px;
  }
  .common-home>div>span{
    border:4px solid #0399FE;
    display: inline-block;
    width: 0px;
    height: 15px;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #0399FE;
  }
  .parent-body{
    border:1px solid #E4E4E4;
  }
  .content-header{
    height:50px;
    line-height: 50px;
    background-color:#F3F3F3;
    color:#666666;
    text-align: center;
  }
  .bg-purple {
    border:1px solid #E4E4E4;
  }
  .bg-color{
    background-color:#F9FAFC;
  }
  .grid-content {
    min-height: 36px;
    line-height: 36px;
    text-align: left;
    font-size:14px;
    padding-left:50px;
    color:#666666;
  }
  .info-main{
    background-color:#fff;
  }
  .el-row{
    margin-bottom:0 !important;
  }
  .el-col{
    height:auto !important;
  }
</style>